<script lang="ts" setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores'

const popup = ref<{
  open: () => void
  close: () => void
}>()
const open = () => {
  isShow.value = true
  // console.log('popup.value', popup.value)
  popup.value?.open()
}
const close = (flag: boolean) => {
  popup.value?.close()
  isShow.value = false
  if (flag !== false) {
    emit('close')
  }
}
const isShow = ref(false)

const props = withDefaults(
  defineProps<{
    textObj?: any
    img: string
    buttonText: string
  }>(),
  {
    img: '',
    buttonText: '开始吃饭',
  },
)
const emit = defineEmits<{
  (event: 'receive', item?: any): void
  (event: 'changeVal', val?: any): void
  (event: 'close', item?: any): void
}>()
const changeVal = (e: any) => {
  if (!e.show) {
    emit('changeVal', e.show)
  }
}
defineExpose({
  open,
  close,
})
</script>

<template>
  <view v-show="isShow">
    <uni-popup ref="popup" type="center" @change="changeVal" :mask-click="false">
      <view class="onLoad">
        <view class="_img">
          <image class="img" :src="props.img" mode="scaleToFill" />
          <view class="text_1" v-if="props.textObj?.text_one">{{ props.textObj?.text_one }}</view>
          <view class="text_2" v-if="props.textObj?.text_two">{{ props.textObj?.text_two }}</view>
          <button class="_button" hover-class="view-hover" @tap.stop="emit('receive')">
            {{ props.buttonText }}
          </button>
        </view>
        <!-- <view class="iconfont icon_Frame-1" @tap="close(true)"></view> -->
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss">
.onLoad {
  width: 590rpx;
  height: 970rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  ._img {
    position: relative;
    width: 590rpx;
    height: 920rpx;
    ._button,
    .text_1,
    .text_2 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      font-size: 26rpx;
      color: #000;
    }
    ._button {
      width: 400rpx;
      color: #fff;
      font-size: 32rpx;
      bottom: 54rpx;
      border-radius: 54rpx;
      background: #8adf4b;
    }
    .text_1 {
      width: 100%;
      text-align: center;
      bottom: 210rpx;
    }
    .text_2 {
      text-align: center;
      width: 100%;
      bottom: 162rpx;
    }
    .img {
      width: 590rpx;
      height: 920rpx;
    }
  }

  .iconfont {
    margin-top: 40rpx;
    font-size: 68rpx;
    color: #fff;
  }
}
</style>
